<template>
  <div class="app-container">
    <page-header
      title="待审核申请"
      desc="预约申请待审核记录信息列表"
    />
    <gridview
      :api-service="apiService"
      :grid-config="configData.gridConfig"
      :grid-handles="configData.gridHandles"
      :bind-params="queryParams"
      :grid-edit-width="50"
      :is-async="true"
      @action="onAction"
    />
  </div>
</template>
<script>
import PageHeader from '@/components/PageHeader'
import Gridview from '@/components/Gridview'
import GridApiService from '@/api/grid'

export default {
  components: {
    PageHeader,
    Gridview
  },
  inject: ['parentRoutePath'],
  data() {
    return {
      tabPosition: 'left',
      activeMenu: null,
      parents: [],
      loaded: false,
      configData: {},
      activeForm: {
        id: 0,
        pid: 0
      },
      data: null,
      apiService: new GridApiService('/book/audit'),
      dialogFormVisible: false,
      queryParams: null,
      showDialog: false,
      dialogTitle: '编辑用户授权策略',
      treeProps: {
        children: 'children',
        hasChildren: 'hasChildren'
      }
    }
  },
  computed: {
    parentOptions() {
      return this.parents.map(function(item) {
        return {
          id: item.id,
          name: item.name
        }
      })
    },
    basePath() {
      return this.parentRoutePath()
    }
  },
  watch: {
    data() {
      this.configData = this.data
      this.loaded = true
    }
  },
  created() {},
  mounted() {
    this.loadGridModel()
  },
  methods: {
    onAction(name, row) {
      if (name === 'view') {
        this.onView(row)
      }
    },
    onView(row) {
      this.$router.push({
        name: `${this.basePath}/view/:id`,
        params: {
          id: row.id
        }
      })
    },
    loadGridModel() {
      this.apiService.config().then(response => {
        const { data } = response
        this.data = data.config
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.category-container {
  &.el-container {
    padding: 0 15px 20px;
    height: calc(100vh - 100px);
    & > .el-container {
      height: calc(100% - 0px);
    }
    & > .el-scrollbar {
      flex: 1;
    }
  }
  .category-master {
    width: 300px;
    display: flex;
    flex-direction: column;
    &__create {
      padding-top: 20px;
      display: flex;
      .el-button {
        flex: 1;
      }
    }
    .el-scrollbar {
      border: 1px solid #e6ebf5;
      border-radius: 5px;
    }
    .el-menu {
      border: none;
      &-item {
        .el-avatar {
          display: inline-flex;
        }
      }
      &-item.is-active {
        color: #1890ff;
        outline: none;
        background-color: #e8f4ff;
        border-left: 3px solid #1890ff;
      }
    }
  }
}

.category-info {
  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
